export function initRound(context: CanvasRenderingContext2D, soil) {
  let width = context.width
  let height = context.height
  // 百分比转换
  let percent = +soil.humidity * 2  / 100 + 0.5
  // 背景
  context.clearRect(0,0,width,height)
  context.save()
  context.beginPath()
  context.lineWidth = 8
  context.lineCap = 'round'
  context.strokeStyle = "#33FFFFFF"
  context.arc(width / 2, width / 2, width / 2 - 10, Math.PI * 0.3, Math.PI * 0.7, true)
  context.stroke()
  context.closePath()
  context.restore()

  // 绘制圆环
  context.save()
  context.lineWidth = 8
  context.lineCap = 'round'
  context.beginPath()
  // 渐变色
  let color = context.createLinearGradient(0, 0, width, height)
  color.addColorStop(0, '#AED34A')
  color.addColorStop(0.5, '#82CD61')
  color.addColorStop(1, '#82CD61')
  context.strokeStyle = color

  context.arc(width / 2, width / 2, width / 2 - 10, Math.PI * 0.7, Math.PI * percent, false)
  context.stroke()
  context.closePath()
  context.restore()

    // 中间文字
  context.font = '22px'
  context.fillStyle = "#ffffff"
  context.textAlign = 'center'
  context.textBaseline = 'middle'
  context.fillText(soil.soilDesc, width / 2, height / 2 - 20)

  // 中间文字
  context.font = '48px'
  context.fillStyle = "#ffffff"
  context.textAlign = 'center'
  context.textBaseline = 'middle'
  context.fillText(soil.humidity, width / 2, height / 2 + 5)

  context.font = '20px'
  context.fillStyle = "#99ffffff"
  context.textAlign = 'center'
  context.textBaseline = 'middle'
  context.fillText('0', width / 2 - 30, height - 5)

  context.font = '20px'
  context.fillStyle = "#99ffffff"
  context.textAlign = 'center'
  context.textBaseline = 'middle'
  context.fillText('100', width / 2 + 25, height - 5)
}

// export function updateRound(context: CanvasRenderingContext2D, soil)
// {
//   context.
// }